<template>
    <div class="wrap">
        <div class="cars-swiper-wrap">
            <swiper class="swiper" :options="swiperOption">
                <swiper-slide v-for="item in 10" :key="item">
                    <carList></carList>
                </swiper-slide>
            </swiper>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </div>
    </div>
</template>
<script>
    import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'

    export default {
        name: "Cars",
        components: {
            Swiper,
            SwiperSlide,
            carList:()=>import('@c/carList')
        },
        methods: {},
        data() {
            return {
                swiperOption: {
                    width: window.innerWidth,

                    slidesPerView: 4,
                    spaceBetween: 50,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    centeredSlides: true,
                    loop: true,
                    cubeEffect: {
                        slideShadows: false,
                        shadow: false,
                        shadowOffset: 100,
                        shadowScale: 0.6
                    },
                }
            }
        },
    }
</script>

<style scoped lang="scss">
    @import "./index";

    .swiper-button-prev,
    .swiper-button-next {
        z-index: 999999;
    }

</style>